<template>
  <div class="contents">
    <el-form :inline="true" label-position="right" label-width="80px" :model="formInline">
      <el-form-item label="">
        <el-select v-model="labeltext" placeholder="请选择" style="width:100px">
          <el-option v-for="item in opt2" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-date-picker class="textwidth" type="daterange" v-model="time" range-separator="-" start-placeholder="开始日期"
        value-format="yyyy-MM-dd"
          end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="搜索:">
        <el-input class="textwidth" v-model="pagination.productName" placeholder="商品名称" />
      </el-form-item>
      <el-form-item :style="{ visibility: !openCol ? 'hidden' : 'visible' }">
        <el-button type="primary" @click="serachfunc()" >查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 85px;" type="text" @click="clickOpen">
          <span :style="{ visibility: openCol ? 'hidden' : 'visible' }">
            收起
          </span>
          高级筛选
          <vab-icon :icon="openCol ? 'arrow-down-s-line' : 'arrow-up-s-line'" />
        </el-button>
      </el-form-item>
      <br />
      <div v-show="!openCol">
        <el-form-item label="采购模式:">
          <el-select v-model="value" placeholder="选择采购类型">
            <el-option v-for="item in opt1" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品分类:">
          <el-cascader v-model="value" :options="opt1" placeholder="全部分类"></el-cascader>
        </el-form-item>
        <el-form-item label="库房:">
          <el-select v-model="pagination.warehouseId" clearable placeholder="请选择">
            <el-option v-for="(item,i) in warehouselist" :key="i" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label=" " label-width="80px">
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table :data="tablemessage.list" style="width: 100%; margin-top: 10px;">
      <el-table-column label="商品名称" prop="goodsInfo.name" />
      <el-table-column label="采购类型" prop="goodsInfo.purchase_type" />
      <el-table-column label="采购员/供应商">
        <template slot-scope="scope">
          {{scope.row.purchaseSupplier.name}}
        </template>
        </el-table-column>
      <el-table-column label="单位" prop="unit" />
      <el-table-column label="单价" prop="price">
        <template slot-scope="scope">
          {{scope.row.price/100}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="total, prev, pager, next,sizes" :page-size="pagination.size" :page-sizes="[10, 20, 50, 100]"
      style="text-align: right;" :current-page="pagination.page"	 :total="tablemessage.endRow" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
  import {
    getList,getwarehouseList,getgoodscategoryList
  } from '@/api/Finance/purchaseBatchChecking'
  export default {
    data() {
      return {
        openCol: true,
        formInline: {
          user: '',
          region: '',
        },
        labeltext: '0',
        pagination:{
          size:10,
          page:1,
          productName:'',//商品名
          createTimeList :[],//创建日期
          sendTimeList :[],//计划交货
          warehouseId:'',//仓库id
        },
        opt2: [{
            value: '0',
            label: '计划交货',
          },
          {
            value: '1',
            label: '创建日期',
          },
        ],
        warehouselist:[],
        value: '',
        opt1: [],
        time:[],
        tablemessage:{},
        table1: [],
      }
    },
    watch:{
      labeltext(val){
        if(val==0){
          this.pagination.sendTimeList = this.time
          this.pagination.createTimeList = []
        }else{
          this.pagination.sendTimeList = []
          this.pagination.createTimeList = this.time
        }
      },
      time(val,oldval){
        // if(val == 0)
        if(this.labeltext==0){
          this.pagination.sendTimeList = val
          this.pagination.createTimeList = []
        }else{
          this.pagination.sendTimeList = []
          this.pagination.createTimeList = val
        }
      }
    }
    ,async created() {
      //获取仓库
      let res = await getwarehouseList({wsId:1})
      this.warehouselist = res.data.list

      let goodsres = await getgoodscategoryList({"ws_id":1})
      console.log(goodsres);
      console.log(res);
      this.getlist()
    },
    methods: {
      clickOpen() {
        this.openCol = !this.openCol
      },
      serachfunc(){
        this.getlist()
      },
      async getlist() {
        let data={
          pagesize:this.pagination.size,
          current:this.pagination.page
        }
        let res = await getList(this.pagination)
        console.log(res);
        this.tablemessage = res
      },
      handleSizeChange(val) {
        this.pagination.size = val
        // console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.pagination.page = val
        // console.log(`当前页: ${val}`);
      }
    },
  }
</script>

<style lang="scss">
  .contents {
    padding: 10px 20px;

    .textwidth {
      width: 215px;
    }

    .items {
      display: flex;
      align-items: center;
    }
  }
</style>
